'use strict';
import React from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import DateUtil from '../Commom/DateUtil';
import Toast from '../Utils/toast';
const styles = StyleSheet.create({
    icon15: {
        width: 15,
        height: 15,
        marginRight: 5,
    },
    avatar: {
        width: 40,
        height: 40,
        marginRight: 10,
        borderRadius: 20,
    },
    name: {
        fontSize: 15,
        color: Global.FontColor.DimGray,
    },
    rowContent: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
    },
    avatarTime: {
        textAlign: 'right',
        color: Global.FontColor.LightGrey,
        fontSize: 13
    },
    titleBox: {
        paddingTop: 20,
        alignItems: 'center',
        justifyContent: 'center',
    },
    stickyHeader: {
        fontSize: 20,
        color: Global.FontColor.DimGray,
        marginLeft: 45,
        marginRight: 45,
    },
    starBox: {
        flexDirection: 'row',
        marginTop: 5,
        flex: 1,
        alignItems: 'center'
    }
});

export function _renderStar(starNum, style) {
    starNum = starNum ? starNum : Math.round(Math.random() * 5);
    let stars = [];
    for (var i = 0; i < 5; i++) {
        let img = i < starNum ? require('../../Image/star.png') : require('../../Image/un_star.png');
        stars.push(
            <Image key={"star" + i} source={img} style={styles.icon15} resizeMode={'contain'}/>
        )
    }
    return (
        <View style={[styles.starBox, style]}>
            {stars}
        </View>
    )
}

export function _renderAvatar(avatar) {
    let starView = null;
    let flex = 1;
    if (avatar.starNum) {
        flex = 0;
        starView = _renderStar(avatar.starNum, {marginTop: 0});
    }
    let timestamp=DateUtil.timestamp(avatar.time+"");
    var time=DateUtil.dateStr(timestamp+"");
    return (
        <View style={{
            flexDirection: 'row',
            alignItems: 'center',
            padding: 10,
            backgroundColor: 'white',
            marginBottom: 1,
        }}>
            <Image style={styles.avatar} source={{uri:avatar.avatar}}/>
            <Text numberOfLines={1} style={[styles.name, {flex}]}>{avatar.name}</Text>
            {starView}
            <Text numberOfLines={1} style={styles.avatarTime}>{time+''}</Text>
        </View>
    )
}
export function _renderAvatarHead(avatar) {
    let starView = null;
    let flex = 1;
    if (avatar.starNum) {
        flex = 0;
        starView = _renderStar(avatar.starNum, {marginTop: 0});
    }
    var time=DateUtil.dateStr(DateUtil.timestamp(avatar.add_time));
    return (
        <View style={{
            flexDirection: 'row',
            alignItems: 'center',
            padding: 10,
            backgroundColor: 'white',
            marginBottom: 1,
            paddingLeft: 20,
            paddingRight: 20,
        }}>
            <Image style={styles.avatar} source={{uri:avatar.avatar}}/>
            <Text numberOfLines={1} style={[styles.name, {flex}]}>{avatar.user_name}</Text>
            {starView}
            <Text numberOfLines={1} style={styles.avatarTime}>{time}</Text>
        </View>
    )
}

export function _renderStickyHeader(title) {
    return (
        <View style={styles.titleBox}>
            <Text numberOfLines={1} style={styles.stickyHeader}>{title}</Text>
        </View>
    )
}

// export function _renderCommentItem(item, navigator) {
//     return (
//         <View
//             style={{
//                 borderColor: '#F2F3F5',
//                 borderBottomWidth: 1,
//                 paddingBottom: 10,
//                 backgroundColor: 'white',
//             }}>
//             {_renderAvatar(item)}
//             <Text style={{paddingRight: 10, paddingLeft: 10}}>{item.content}</Text>
//             <View style={[styles.rowContent, {flexWrap: 'wrap'}]}>
//                 {
//                     item.images ?
//                         item.images.map((item, index)=> {
//                             let marginRight = ((index + 1) % 4 === 0) ? 0 : 7;
//                             return (
//                                 <TouchableOpacity
//                                     key={'img' + index}
//                                     onPress={() => {
//                                         navigator.push({
//                                             name: 'ImageViewer',
//                                             component: ImageViewer,
//                                             passProps: {
//                                                 source: item.images,
//                                             }
//                                         })
//                                     }}
//                                 >
//                                     <Image style={{
//                                         marginTop: 7,
//                                         width: (Global.Const.size.width - 50) / 4,
//                                         height: (Global.Const.size.width - 50) / 4,
//                                         marginRight,
//                                     }}
//                                            source={item}
//                                     />
//                                 </TouchableOpacity>
//                             )
//                         }) : null
//                 }
//             </View>
//         </View>
//     )
// }